<template>
  <div class="book-container">
    <div class="search-view">
      <div style="display: flex;align-items: center;margin-left: 10px;">
        <img style="width: 17px;height: 19px;" src="../../../assets/charpter/icon.png">
        <span>习题列表</span>
      </div>
      <div style="margin-right: 20px;">
        <el-button type="primary" @click="handleAddTest">增加习题</el-button>
      </div>
    </div>
    <div class="list-view">
      <ListItem v-for="(item, index) in practises" :key="item.practiseId" :order="index" :item="item"
        @update="handleUpdate(item)" @del="handleDelete(item)"></ListItem>
    </div>
    <div class="bottom">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
    <AddQuestion v-model:visible="open" :typeId="route.query.typeId" :practiseType="route.query.practiseType"
      :title="title" :detail="updateQuestion" @finish="getList()" />
  </div>
</template>

<script setup name="CouseTime">
import ListItem from './listItem'
import { practiseList, delpractise } from '@/api/course/practise'
import { useRoute } from 'vue-router'
import AddQuestion from './addQuestion'
const route = useRoute()
const { proxy } = getCurrentInstance();
const practises = ref([])
const loading = ref(true);
const total = ref(0);
// 弹窗表单
const open = ref(false);
const title = ref("");
const updateQuestion = ref({})

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    practiseType: '',
    typeId: ''
  }
});
const { queryParams } = toRefs(data);
function getList() {
  loading.value = true;
  practiseList(queryParams.value).then(response => {
    practises.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
onMounted(() => {
  queryParams.value.typeId = route.query.typeId
  queryParams.value.practiseType = route.query.practiseType
  if (route.query.showAdd === '1') {
    open.value = true;
    title.value = "添加习题";
  }
  getList()
})
/** 新增按钮操作 */
function handleAddTest() {
  open.value = true;
  title.value = "添加习题";
}
/** 修改按钮操作 */
function handleUpdate(row) {
  updateQuestion.value = row
  open.value = true;
  title.value = "修改习题";
}
/** 删除按钮操作 */
function handleDelete(row) {
  const _practiseIds = row.practiseId;
  proxy.$modal.confirm('是否确认删除该习题？').then(function () {
    return delpractise(_practiseIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}
</script>
<style lang='scss' scoped>
@import './index.scss'
</style>